<template>
  <el-form ref="form" :model="formData" label-width="80px">
    <el-form-item label="菜单名称">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>

    <el-form-item label="菜单路径">
      <el-input v-model="formData.href"></el-input>
    </el-form-item>

    <el-form-item label="上级菜单">
      <el-select v-model="formData.parentId" placeholder="请选父级菜单">
        <el-option label="顶层菜单" :value="-1"></el-option>
        <el-option
          v-for="menu in topMenus"
          :label="menu.name"
          :value="menu.id"
          :key="menu.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="描述">
      <el-input v-model="formData.description"></el-input>
    </el-form-item>

    <el-form-item label="图标名称">
      <el-input v-model="formData.icon"></el-input>
    </el-form-item>

    <el-form-item label="是否显示">
      <el-radio-group v-model="formData.shown">
        <el-radio :label="true">是</el-radio>
        <el-radio :label="false">否</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="排序">
      <el-input v-model="formData.orderNum"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即{{ msg }}</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { createOrUpdateMenu, getEditMenuInfo } from "@/api/menu";
export default {
  name: "MenuCreateOrEdit",
  data() {
    return {
      formData: {
        isCreate: true, //标记当前是创建还是编辑
        id: undefined,
        parentId: -1,
        name: "",
        href: "",
        icon: "",
        orderNum: 0,
        description: "",
        shown: true,
      },
      topMenus: [],
    };
  },
  created() {
    //this.loadMenus();//获取顶级菜单信息
    console.log("获得编辑的路由id", this.$route.params.id);
    this.isCreate = !this.$route.params.id; //创建还是编辑
    //获取要编辑的菜单信息
    this.loadEditMenuInfo();
  },
  computed: {
    msg() {
      return this.isCreate ? "添加" : "更新";
    },
  },
  methods: {
    onSubmit() {
      // console.log("submit!");
      createOrUpdateMenu(this.formData).then((res) => {
        if (res.data.data) {
          this.$message.success(`${this.msg}菜单成功!`);
          this.$router.push({ name: "menus" });
        } else {
          this.$message.error(`${this.msg}菜单失败`);
        }
        console.log("菜单创建获得的信息", res);
      });
    },
    //添加菜单，收集一级菜单
    /*     loadMenus() {
      getAllMenus().then((res) => {
        if (res.data.code === "000000") {
          //收集信息里的一级菜单
          this.topMenus = res.data.data.filter((item) => item.level === 0);
          //一级菜单
          //   console.log(this.topMenus);
        } else {
          this.$message.error("创建菜单时,获取所有菜单信息失败");
        }
        console.log("获取所有菜单信息，过滤一级菜单", res);
      });
    }, */
    //获取编辑菜单页面信息,同时获取顶层菜单信息
    loadEditMenuInfo() {
      const { id = -1 } = this.$route.params;
      getEditMenuInfo(id).then((res) => {
        if (res.data.code === "000000") {
          const { menuInfo, parentMenuList } = res.data.data;
          Object.assign(this.formData, menuInfo);
          this.topMenus = parentMenuList;
        } else {
          this.$message.error("获取编辑菜单信息失败");
        }
        console.log("获取编辑页面的信息", res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  padding: 70px;
  background: #fff;
}
</style>
